<script setup>
  import { ref } from 'vue'
  const visible = ref(false)
  const value = ref()
  const options = ref([
    { label: '地址去地址去地址去地址去地址去地址去', value: 1 },
    { label: '地址去地址去地址去地址去地址去地址去', value: 2 },
    { label: '地址去地址去地址去地址去地址去地址去', value: 3 },
    { label: '地址去地址去地址去地址去地址去地址去', value: 4 }
  ])
  const open = () =>{
    visible.value = true
  }
  const close = () =>{
    visible.value = false
  }
  defineExpose({
    open,
    close
  })
</script>

<template>
  <a-modal v-model:open="visible" title="选择地址" :footer="null">
    <a-radio-group v-model:value="value">
      <div class="address-item" v-for="item in options" :key="item.label">
        <a-radio :value="item.value"> {{ item.label }} </a-radio>
      </div>
    </a-radio-group>
    <div class="btn-box">
      <a-button type="primary" class="btn"> 确认 </a-button>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
.address-item {
  margin-bottom: 16px;
}
.btn-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .btn {
    width: 100%;
    background-color: var(--primary);
  }
}
</style>